<template>
    <div class="home">
            <div class="context">
            <div class="header">
                <h1>{{title}}</h1>
                <h5>创建时间：{{bytime}}</h5>
            </div>
            <div class="ct_text">
                 <article v-html="value" ></article>
                 <div class="ct_b">
                     <el-tag type="success" class="ctb_a"><i class="el-icon-edit"></i>{{type}}</el-tag>
                    <el-dropdown class="ctb_b"  @command="handleCommand">
  <span class="el-dropdown-link">
    <i class="el-icon-more"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a"> <i class="el-icon-chat-dot-square"></i>回帖</el-dropdown-item>
    <el-dropdown-item command="b"><i class="el-icon-thumb"></i>赞一下</el-dropdown-item>
    <el-dropdown-item command="c"><i class="el-icon-document-add"></i>收藏</el-dropdown-item>
    <el-dropdown-item command="d"><i class="el-icon-warning"></i>举报</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
                 </div>
            </div>
            <!-- 发帖人 -->
    <div class="user">
    <el-card class="usercard">
       <el-avatar class="uc_a" shape="square" :size="100" fit="fill" :src="url"></el-avatar>
        <div class="uc_right">
          <div class="ucr_con">
            <el-tag effect="dark">姓名:</el-tag>
            <el-tag style="margin-right:10px" effect="dark">{{username}}</el-tag>
            <el-tag effect="dark"  type="success">性别:</el-tag>
            <el-tag effect="dark"  type="success">
              <i class="el-icon-female" v-if="sex==1"></i>
              <i class="el-icon-male" v-else></i>
              </el-tag>
            
          </div>
          <hr>
          <div class="ucr_con" style="   background: rgba(248, 248, 248, 0.308);">
             <el-tag effect="dark"  type="success">格言:</el-tag>
            <b>{{geyan}}</b>
          </div>
        </div>
    </el-card>
            </div>
            <!-- //评论区 -->
            <div class="pinglun">
              <div class="p_header">
                <span class="ctb_a"><i class="el-icon-chat-line-square"></i>{{pinglun}}</span>
                 <el-tooltip effect="dark" content="回帖" placement="bottom">
                      <el-button @click="drawer = true" style="margin-top: 10px;" class="ctb_b" size="small" type="warning" icon="el-icon-message" circle></el-button>
                   </el-tooltip>
              </div>
              <div class="p_content">
<!-- -- -->
       <div class="c_item" v-for="item in listDate">
        <div class="c_it_content">
             <div class="avatars">
                 <div class="av_h">
            <el-avatar  size="large" :src="item.attribute.imgUrl"></el-avatar>
                 </div>
             </div>
        <div class="avatars"> 
        <div class="b">
          <span> <el-tag  type="danger" size="small">{{item.attribute.userName}}</el-tag></span>
          <span>.评论时间：{{item.attribute.bytime}}</span>
        </div>
        <div class="span">
          <article v-html="item.attribute.commentText" ></article>
          </div>
        </div>
        <!-- 回复 -->
        <div class="hf" v-for="(o,index) in item.childNodes" :key="index">
        <div class="avatars"> 
        <div class="b">
          <span> <el-tag  type="success" size="small">{{o.attribute.userName}}</el-tag></span>
          <span>.回复时间：{{o.attribute.bytime}}</span>
        </div>
        <div class="span">
          <article v-html="o.attribute.commentText"></article>
          </div>
        </div>
        <!-- <div class="c_item_right" v-if="o.attribute.commentId==tieCode">
             <i class="el-icon-delete"></i>
        </div> -->
           </div>
        </div>
 <div class="c_item_right">
<span> <el-dropdown class="ctb_b" >
  <span class="el-dropdown-link">
    <i class="el-icon-more"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="huiFu(item.attribute.commentCode)" icon="el-icon-chat-dot-square"> 回复</el-dropdown-item>
    <el-dropdown-item command="b" icon="el-icon-thumb">赞一下</el-dropdown-item>
    <el-dropdown-item command="c" icon="el-icon-warning">举报</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown></span>
        </div>
    </div>
    <!-- -- -->
              </div>
            </div>
            </div>

     <el-drawer
  title="回帖"
  :visible.sync="drawer"
  :direction="'btt'"
    size='70%'
  :before-close="handleClose">

  <div class="mavonEditor">
    <mavon-editor @change="changeData" class="nossr" 
    :toolbarsBackground="'#cccccc'"
    :previewBackground="'#fbfbfb'"
    :scrollStyle="true"
    v-model="handbook"
      />
      <el-button type="danger" style="float: right;  margin: 10px; " @click="drawer = false">取消</el-button>
      <el-button type="primary" style="float: right;  margin: 10px; "@click="setPingLun(texts,'0')">确定</el-button>

    </div>
</el-drawer>


<!-- 回复 -->

<el-dialog title="回复" width="40%" :visible.sync="dialogFormVisible">
  <el-form :model="form">
   <el-form-item label="内容" >
      <el-input   type="textarea":rows="4" v-model="form.text" autocomplete="off" clearable ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="setPingLun(form.text,form.codes)">确 定</el-button>
  </div>
</el-dialog>
<div class="lastfoot"></div>
    </div>
</template>
<script>
import API from '@/api/cate.js'
export default {
    name:'contents',
    data(){
        return{
          form:{
            codes:'',
            text:''
          },
           url:'',
          type:'问题',
          username:'',
          title:'社区缺陷报告与功能建议',
          bytime:'2019-01-20 13:03:55',
          geyan:'生活不止眼前的苟且，还有诗和远方！',
          inviteCode:'',
          tieCode:'',
          pinglun:100,
          handbook: '',
          texts:'',
          userCode:'1',
          sex:1,
          drawer: false,
          value: ``,
          defaultData: "preview",
          listDate:[],
          dialogFormVisible:false
       }
    },
    activated: function() {
    this.inviteCode=this.$route.query.inviteCode;
    this.getData();
    this.getPingLun();
    this.tieCode=sessionStorage.getItem("userCode");
    this.getNumbers();
        },
    methods:{
      //获取帖子数据
      getData(){
         this.loading.startLoading();
           let obj={
             inviteCode:this.inviteCode
          }
           this.$axios
            .post(API.getInvitaList, obj)
            .then(res => {
              if (res.data.responseCode === 200) {   
               this.title=res.data.data.list[0].inviteTitle;
               this.bytime=res.data.data.list[0].bytime;
               this.value=res.data.data.list[0].inviteContent;
               this.type=res.data.data.list[0].type;
               this.userCode=res.data.data.list[0].userCode;
               this.pinglun=res.data.data.list[0].pinglunNum;
               this.getUser(res.data.data.list[0].userCode);
                  this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                 res.data.data.list
              }
            });
      }
      //获取用户信息
      ,getUser(val){
        console.log(val);
        
         let obj1={
              userCode: val
            }
            this.$axios.post(API.listUser, obj1)
            .then(res => {
              if (res.data.responseCode === 200) { 
               this.username=res.data.data.list[0].userName;
               this.sex=res.data.data.list[0].userSex;
               this.geyan=res.data.data.list[0].geyan;
               this.url=res.data.data.list[0].userUrl;
                  this.loading.endLoading();
              } else {
                 this.$message.error('查询失败失败');
                 res.data.data.list
              }
            });
      }
      // 获取评论
      ,getPingLun(){
           let objs={
             inviteCode:this.inviteCode
          }
 this.$axios.post(API.getPingLun, objs)
            .then(res => {
              if (res.data.responseCode === 200) { 
                this.listDate=res.data.data
              //  console.log(getUser(res.data.data.attribute.commentId));
               
              }
            }).catch(error =>{
               this.$message.error('查询失败');
            })

      },
      //帖子访问人数统计
      getNumbers(){
          // addCensus
           let objs={
             invite_code:this.inviteCode,
             level: "1",
             userId: this.tieCode
          }
 this.$axios.post(API.addCensus, objs)
            .then(res => {
              if (res.data.responseCode === 200) { 
              console.log(res.data);
              }
            }).catch(error =>{
               this.$message.error('统计失败');
            })
      },
      //收藏帖子
      addCensus(){
          // addCensus
           let objs={
             invite_code:this.inviteCode,
             level: "2",
             userId: this.tieCode
          }
 this.$axios.post(API.addCensus, objs)
            .then(res => {
              if (res.data.responseCode === 200) { 
               this.$message({
              message: '收藏帖子成功！',
              type: 'success'
              });
              }else{
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', { style: 'color: teal' }, '你已经收藏了本帖 ')
          ])
        });
              }
            }).catch(error =>{
               this.$message.error('统计失败');
            })
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       changeData(value, render) {
            // this.handbook = render;
            this.texts=render;
            console.log(this.handbook);
        },
         handleCommand(command) {
        if(command=='a'){
           this.drawer= true
        }
        if (command=='c') {
          this.addCensus()
        }
      } 
      //回复
      ,setPingLun(val,s){
        let obj={     
      "commentId": this.tieCode,
      "commentText":val,
      "inviteCode": this.inviteCode,
      "replyId": s           
        }
        this.$axios.post(API.writePingLun, obj)
            .then(res => {
              if (res.data.responseCode === 200) { 
                this.listDate='';
                 this.$message({
                message: '恭喜你，评论成功！',
                type: 'success'
                });
                this.drawer = false;
                this.dialogFormVisible=false;
                this.handbook='';
                this.pinglun+=1;
               this.getPingLun();
              }
            }).catch(error =>{
               this.$message.error('回复失败');
            })
      },huiFu(val){
        console.log("==========");
        this.form.codes=val;
         this.dialogFormVisible= true,
        console.log(val); 
      }
      ,beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
               
            }
    }
}
</script>

<style scoped>

.home{
   /* background-image: url(https://static.hacpai.com/images/holiday/blockchain-bg.png); */
     background:#ffffff;
    width: 100%;
    height: 650px;
    text-align: center;
    margin: 0 auto;
     overflow: auto;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.mavonEditor {
  width: 100%;
  height: 300px;
}
.context{
    padding: 20px;
    background: rgb(253, 253, 247);
    padding-top: 20px;
    width: 65%;
    margin: 0 auto;
}
.ct_text{
      text-align: left;
     border-bottom: 1px solid #ccc;
     overflow-x: scroll;
}
.user{
    margin-top: 50px;
    width: 100%;
    height: 200px;
   
}

.usercard{
   width: 100%;
    height: 180px;
    background: #ccc;
    background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=453180754,3269959371&fm=26&gp=0.jpg);
    line-height: 180px;
}
.ct_b{
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.ctb_a{
    float: left;
}
.ctb_b{
    float: right;
}
.uc_a{
  float: left;
 margin-top: 40px;
 margin-left: 10px;
}
.uc_right{
  height: 180px;
  /* padding-top: 20px; */
  margin-left: 20px;
  width: 80%;
  float: left;
}
.ucr_con{
  width: 100%;
  height: 88px;
  line-height: 88px;
  text-align: left;
  /* background: #ccc */
}
.pinglun{
  width: 100%;
  height: 100%;
  padding-bottom: 100px;
  display: block

}
.p_header{
  height: 50px;
  line-height: 50px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.p_content{
   width: 100%;
   margin-top: 20px;
   /* border-bottom: 1px solid #ccc; */
}

.c_item{
    width: 100%;
    float: left;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-top: 5px;
    border-bottom: 1px solid #ccc
}
.c_it_content{
    width: 50%;
    float: left;
}
.avatars{
    margin-right: 15px;
    /* height: 60px; */
    line-height: 30px;
    float: left;
}
.avatars .av_h{
    padding-top: 10px;
}
.avatars .span{
    padding-left: 5px;
    width: 320px;
    text-align: left;
    cursor: pointer;
}
.avatars .b{
    height: 50%;
    color: rgb(17, 245, 176);
    padding-left: 5px;
    width: 280px;
    text-align: left;
    font-size: 10px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.c_item_right{
    height: 70px;
    line-height: 70px;
    float: right;
}
.hf{
  padding-left: 100px;
  width: 500px;
}
.lastfoot{
  width: 100%;
  height: 200px;
}
</style>
<style>
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .el-card__body {
    padding: 0px;
}
.nossr{
    position: absolute;
    width: 100%; 
    height: 200px;
}
</style>